<template>
  <div class="home">
    <!-- 顶部Banner轮播 -->
    <div class="banner">
      <el-carousel 
        height="160px" 
        indicator-position="outside" 
        :autoplay="true" 
        :interval="5000" 
        arrow="hover">
        <el-carousel-item v-for="(item, idx) in banners" :key="idx">
          <img :src="item" class="banner-img" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 功能入口 -->
    <div class="features">
      <div class="feature" @click="goTo('/video')">
        <img src="@/assets/shouye.png" alt="视频制作" />
        <span>视频制作</span>
      </div>
      <div class="feature" @click="goTo('works')">
        <img src="@/assets/vue.svg" alt="我的作品" />
        <span>我的作品</span>
      </div>
      <!-- 添加新功能入口 -->
      <div class="feature" @click="goTo('usage')">
        <img src="@/assets/vue.svg" alt="使用场景" />
        <span>使用场景</span>
      </div>
      <div class="feature" @click="goTo('help')">
        <img src="@/assets/shouye.png" alt="AI帮助" />
        <span>AI帮助</span>
      </div>
    </div>

    <!-- 使用教程 -->
    <div class="tutorials">
      <div class="tutorial-title">
        <Document />
        <span>使用教程</span>
      </div>
      <div class="tutorial-list">
        <div class="tutorial-card" v-for="(item, idx) in tutorials" :key="idx">
          <img :src="item.img" />
          <div class="tutorial-info">
            <div class="tutorial-name">{{ item.title }}</div>
            <div class="tutorial-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部公司信息 -->
    <div class="footer">
      共享科技 技术支持
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Document } from '@element-plus/icons-vue'
// 替换require为ES模块导入
import banner1 from '@/assets/banner1.png'
import banner2 from '@/assets/banner2.png'
import banner3 from '@/assets/banner3.png'

/**
 * 首页Banner图片列表
 */
// 使用现有图片替代
import shouye from '@/assets/shouye.png'
import vueSvg from '@/assets/vue.svg'

const banners = [
  shouye,
  shouye,
  vueSvg
]

/**
 * 导入教程图片
 */
import tutorial1 from '@/assets/shouye.png'
import tutorial2 from '@/assets/vue.svg'

/**
 * 使用教程卡片数据
 */
const tutorials = [
  { img: tutorial1, title: '小程序登录', desc: '如何登录数字人小程序' },
  { img: tutorial2, title: '生成形象', desc: '如何克隆自己的数字人' },
  { img: tutorial1, title: '视频制作', desc: '三步完成专业级视频创作' },
  { img: tutorial2, title: '作品发布', desc: '分享你的创作到社交平台' }
]

const router = useRouter()

/**
 * 跳转到指定页面
 * @param {string} name 路由名称
 */
function goTo(name: string) {
  console.log('====================================');
  console.log(name);
  console.log('====================================');
  router.push({ name })
}
</script>

<style scoped>
.home { padding-bottom: 60px; max-width: 750px; margin: 0 auto; }
.banner { margin: 16px; overflow: hidden; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.banner-img { width: 100%; height: 160px; object-fit: cover; }

/* 功能入口样式 */
.features { display: flex; flex-wrap: wrap; padding: 0 16px; }
.feature { flex: 1 0 25%; display: flex; flex-direction: column; align-items: center; padding: 16px 0; cursor: pointer; transition: transform 0.3s ease; }
.feature:hover { transform: scale(1.05); }
.feature img { width: 56px; height: 56px; padding: 8px; background: #f5f5f5; border-radius: 12px; }
.feature span { margin-top: 12px; font-size: 14px; color: #333; }

/* 教程区域样式 */
.tutorials { margin: 24px 16px; }
.tutorial-title { display: flex; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.tutorial-title .el-icon { margin-right: 8px; color: #646cff; }
.tutorial-title span { font-size: 16px; font-weight: 500; }
.tutorial-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.tutorial-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; transition: box-shadow 0.3s ease; }
.tutorial-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.tutorial-card img { width: 100%; height: 100px; object-fit: cover; }
.tutorial-info { padding: 12px; }
.tutorial-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.tutorial-desc { font-size: 12px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 底部信息样式 */
.footer { margin-top: 24px; padding: 16px; text-align: center; font-size: 12px; color: #999; }
</style>
